<template>
    <a-layout style="min-height: 100vh">
        <a-layout-sider v-model:collapsed="collapsed" collapsible>
            <div class="logo">DJ推荐系统</div>
            >
            <a-menu
                :selectedKeys="selectedKeys"
                theme="dark"
                mode="inline"
                :inline-collapsed="collapsed"
                @click="menuClick">
                <!-- 菜单遍历的开始 -->
                <template v-for="item in list">
                    <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
                    <a-menu-item v-if="!item.children" :key="item.path" :menu-info="item">
                        <component :is="item.icon" />
                        <span>{{ item.title }}</span>
                    </a-menu-item>
                    <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->
                    <sub-menu v-else :key="item.path" :menuinfo="item" />
                </template>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header class="aHeader" style="background: #fff; padding: 0">
                <a-button :loading="iconLoading"  @click="enterIconLoading" style="margin-right: 1%">返回首页</a-button>
            </a-layout-header>

            <a-layout-content style="margin: 0 16px">
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>管理员后台</a-breadcrumb-item>
                    <a-breadcrumb-item>{{currentMenu}}</a-breadcrumb-item>
                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                    <!--定义路由出口-->
                    <router-view/>
                </div>
            </a-layout-content>
            <a-layout-footer style="text-align: center">
                Ant Design ©2018 Created by Ant UED
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>

<script>
import {
    SettingOutlined,
    ExclamationCircleOutlined,
} from '@ant-design/icons-vue';
import {defineComponent, ref} from 'vue';
import router from '@/router/index'
import userSetting from "@/pages/myhome/dRootPage/menu/userSetting.vue";

export default defineComponent({
    computed: {
        userSetting() {
            return userSetting;
        }
    },
    components: {
        SettingOutlined,
        ExclamationCircleOutlined,
    },
    data() {
        return {
            intoPage:0,
            collapsed: ref(false),
            selectedKeys: ['/userSetting'],  // 初始化选中的菜单项
            currentMenu: "用户管理",
            list: [
                {
                    key: '1',
                    title: '用户管理',
                    path: '/userSetting',
                    icon: SettingOutlined,
                },
                {
                    key: '2',
                    title: '关于系统',
                    path: '/SystemInfo',
                    icon: ExclamationCircleOutlined
                }
            ]
        };
    },
    setup() {
        //返回首页按钮延时样式实现
        const iconLoading = ref(false);
        const enterIconLoading = () => {
            iconLoading.value = {
                delay: 100,
            };
            setTimeout(() => {
                iconLoading.value = false;
                router.push("/index");
            }, 1000);
        };
        return {
            iconLoading,
            enterIconLoading,
        };
    },
    created() {
        // 将从缓存中取出openKeys
        const openKeys = window.sessionStorage.getItem('openKeys');
        if (openKeys) {
            // 存在即赋值
            this.openKeys = JSON.parse(openKeys);
        }
    },
    mounted() {
        // 在mounted中调用menuClick方法实现默认跳转
        this.menuClick({
            item: { "menu-info": this.list[0] },  // 模拟点击用户管理菜单项
            key: this.list[0].path
        });
    },
    methods: {
        menuClick({ item, key }) {
            this.currentMenu = item["menu-info"].title;
            this.selectedKeys = [key];  // 更新选中项
            this.$router.push({
                path: key
            });
        },
    }
});
</script>


<style>
.logo {
    height: 64px;
    width: auto;
    color: white;
    text-align: center;
    line-height: 64px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.3);
}
.aHeader{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#components-layout-demo-side .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
    background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
    background: #141414;
}
</style>